<template>
  <div style="height:100%">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="orderScroller">
      <div class="allorders ub ub-ver bg_f2">
        <div v-show="listData">
          <div class="listItem ub fc_333 bg_w ub-ver" v-for="(item, index) in listData" @click="orderItemClc(item.orderId,item.orderType,item.orderNo)" :key="item.orderCreateTime">
            <div class="ub ub-pj wd_100 fz08 border_line">
              <div class="ub">
                <div class="ub ub-img1" :class="{'ticket':item.orderType === 1,'zengzhi':item.orderType === 2}"></div>
                <div class="ub ub-ac ticket_content">{{ORDERTYPE[item.orderType - 1]}}</div>
                <div class="ub ub-ac">{{getTimesObj(item.orderCreateTime).first+' '+getTimesObj(item.orderCreateTime).second}}</div>
              </div>
              <div class="ub ub-ac tx-c" :class="{'yellow':(item.orderStatus == '已预订'),'green':(item.orderStatus == '已出票'),'red':(item.orderStatus != '已预订'&& item.orderStatus != '已出票')}">
                {{item.orderStatus}}
              </div>
            </div>
            <div class="ub ub-pj">
              <div class="ub">
                <div class="ub ub-ac">{{getCityName(item.orderBeginCityDetails,0)}}-{{getCityName(item.orderEndCityDetails,0)+' '+item.orderGoFlightAirLine+item.orderGoFlightNum}}</div>
              </div>
              <div class="ub ub-ac">订单合计：￥{{item.orderTotalSum + (item.orderPayHandle || 0)}}</div>
            </div>
            <div class="ub fz08 fc_888">
              <div class="ub">
                起飞时间
              </div>
              <div class="ub mar_l1">{{item.orderGoBeginDate}}</div>
              <div class="ub mar_l1">{{$utils.getWeek(item.orderGoBeginDate).third}}</div>
              <div class="ub mar_l1">{{item.orderGoBeginTime.substring(0,5)}}</div>
            </div>
            <div class="ub border_top ub-pe" style="margin-bottom:0" v-show="item.orderStatus == '已出票'">
              <div class="ub refund_btn" @click.stop="refundTicket(item.orderType, item.orderNo, item.orderId)">退订</div>
            </div>
            <div class="ub border_top ub-pe" style="margin-bottom:0" v-show="item.orderStatus == '已预订'">
              <div class="ub refund_btn" @click.stop="payTicket(item.orderNo,item.orderTotalSum,item.orderPayHandle,item.orderCreateTime)">支付</div>
              <div class="ub refund_btn canncel_btn" @click.stop="canncelTick(item.orderType, item.orderId)">取消</div>
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    // this.getData(true);
    // this.$utils.getWeek('2017-11-02 00:00:00');
  },
  props: {
    dataType: {
      type: String
    }
  },
  data: function () {
    return {
      ORDERTYPE: ['机票', '增值服务'],
      orderStatus: [],
      listData: ''
    }
  },
  components: {
  },
  methods: {
    refundTicket: function (orderType, orderNo, orderId) {
      // let orderType = this.allOrders.showOrder.orderType;
      let data = {
        orderType,
        orderNo,
        orderId
      }
      let self = this;
      if (orderType !== 2) {
        this.$store.commit('setConfirm', { ifShow: true, text: '确定退订机票？' });
        this.$store.commit('setConfirmCallBak', function () {
          // console.log('123');
          self.$store.commit('showOrder', data);
          self.$router.push('/ApplyRefund');
        });
      } else {
        this.$store.commit('setConfirm', { ifShow: true, text: '确定退订辅营？' });
        this.$store.commit('setConfirmCallBak', function () {
          // console.log('123');
          self.$store.commit('showOrder', data);
          self.$router.push('/ApplyViceCamp');
        });
      }
    },
    payTicket: function (orderNo, orderTotalSum, orderPayHandle, orderCreateTime) {
      const miao = 10 * 60 * 1000;
      let data = {
        payEndTime: orderCreateTime + miao,
        order: {
          orderTotalSum,
          orderPayHandle,
          orderNo
        }
      }
      console.log(data);
      this.$store.commit('setOrderPayment', data);
      this.$router.push('/orderPayment');
    },
    canncelTick: function (orderType, orderId) {
      let self = this;
      this.$store.commit('setConfirm', { ifShow: true, text: '是否要取消当前订单？' });
      this.$store.commit('setConfirmCallBak', function () {
        console.log('123');
        self.doCanncelOrder(orderType, orderId);
      });
    },
    doCanncelOrder: function (orderType, orderId) {
      // let showOrder = this.allOrders.showOrder;
      // let orderType = showOrder.orderType + '';
      // let orderId = showOrder.orderId + '';
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let content = {
        OrderType: orderType,
        UserId: userId,
        OrderId: orderId
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let me = this;
      this.$utils.ajax(data, 'cancelOrder', me, function (data) {
        console.log(data);
        me.$store.dispatch('showTx', { text: '订单已取消' });
        me.getData(true);
      });
    },
    getData: function (isFresh) {
      let dataType = this.dataType;
      if (isFresh) { // 如果刷新重置数据和页面
        this.$store.commit('resetPage', dataType)
      }
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let page = this.allOrders[dataType].page;
      let rows = this.allOrders.rows;
      let type = this.allOrders.searchType;
      let content = {
        'page': page + '',
        'type': type + '',
        'rows': rows + '',
        'userId': userId
      };
      console.log('getData');
      // console.log(content)
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      // data.headers.token = loginToken;
      console.log(data);
      // return false;
      let self = this;
      this.$store.commit('incrementPage', dataType); // 请求为异步需要在请求前增加page
      this.$utils.ajax(data, 'ordersList', self, function (data) {
        console.log('success');
        console.log(data);
        let list = data.content.list;
        if (list.length > 0) {
          self.$store.commit('addPage', { name: dataType, data: list });
        }
        if (list.length < 10) {
          self.$refs.orderScroller.finishInfinite(true);
          self.$store.commit('reductionPage', dataType);
        }
        self.selData();
      })
    },
    selData: function () {
      // console.log(this.dataType);
      let data = this.allOrders[this.dataType].arr.sort(function (a, b) {
        return b.orderCreateTime - a.orderCreateTime;
      });
      // data = this.sortData(data)
      // console.log(data);
      this.listData = data;
      // return data;
    },
    sortData: function (data) {
      return data.sort(function (a, b) {
        return a.orderCreateTime - b.orderCreateTime;
      });
    },
    getTimesObj: function (ms) {
      return this.$utils.formatTime(ms);
    },
    getCityName: function (str, index) {
      return str.split('_')[index];
    },
    orderItemClc: function (orderId, orderType, orderNo) {
      console.log(orderId + ',' + orderType);
      this.$store.commit('showOrder', { orderId, orderType, orderNo });
      // console.log(index);
      this.$router.push('/orderDetail');
    },
    infinite: function () {
      // this.$refs.orderScroller.finishInfinite(true);
      this.getData(false);
      // console.log('infinite');
      // console.log(data)
    },
    refresh: function () {
      this.$refs.orderScroller.finishPullToRefresh();
      this.getData(true);
      // console.log('refresh');
    }
  },
  computed: mapState(['loginData', 'allOrders'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.ticket
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('detail_ticket@2x.png');
.zengzhi
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('detail_zengzhi@2x.png');
.listItem
  margin-top: f_times(0.6);
  padding: f_times(0.6);
  box-sizing: border-box;
  >div
    margin-bottom: f_times(0.6);
  .ticket_content
    margin: 0 f_times(0.6);
  .red
    color: #F24848;
  .yellow
    color: #FF9E04;
  .green
    color: #64AA70;
  .border_line
    border-bottom: 1px solid #eee;
    margin-bottom: f_times(0.6);
    padding-bottom: f_times(0.4);
  .border_top
    border-top: 1px solid #eee;
    padding-top: f_times(0.4);
.refund_btn
  border: 1px solid #843D99;
  color: #843D99;
  font-size: f_times(0.6);
  padding: f_times(0.2);
  border-radius: 2px;
  margin-right: f_times(1);
.canncel_btn
  border: 1px solid #333;
  color: #333;
</style>